const webpack = require("webpack")
const path = require("path")
const HtmlPlugin = require("html-webpack-plugin")
const {CleanWebpackPlugin} = require("clean-webpack-plugin")

module.exports = {
  entry: __dirname + "/src/app.js", // 项目入口文件,
  output: {
    // 出口
    path: path.resolve(__dirname, "build"),
    // filename: "bundle.js",
    filename: "[name].[hash].js",
  },
  devServer: {
    // 本地服务器
    contentBase: path.join(__dirname, "build"), // 本地服务器所在目录
    compress: true, // 开启Gzip 压缩
    port: 9090,
    hot: true, // 热加载
    open: true, // 自动打开浏览器
    proxy: {
      // 反向代理
      "/api": {
        target: "目标地址",
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  },
  resolve: {
    extensions: [".js", ".jsx"], // 和谐文件的后缀可以省略不写
    alias: {
      "@": path.resolve(__dirname, "src"), // 路径别名
    },
  },
  module: {
    // 模块处理
    rules: [
      {
        test: /\.jsx?$/, // (js|jsx) 要处理的模块，一般使用正则表达式进行模块匹配
        exclude: /node_modules/, // 排除某些文件夹
        loader: "babel-loader", // 交给谁来处理这些文件
        options: {
          // loader 配置
          presets: ["@babel/preset-env", "@babel/preset-react"], // ES6语法转换和 JSX 语法转换
          plugins: [["@babel/plugin-proposal-class-properties", {loose: true}]], // 支持还在试验阶段的语法，如 class field
        },
      },
      {
        test: /\.(css|less)$/,
        include: path.resolve(__dirname, "src"), // 只处理某些目录下的文件
        use: ["style-loader", "css-loader", "postcss-loader", "less-loader"], // 要用到的 loader 列表
      },
      {
        // 图片字体处理
        test: /\.(png|jpg|gif|webp|svg|jpeg|ttf|woff|eot)$/,
        use: {
          loader: "url-loader", // 未超过指定大小图片会以base64编码嵌入代码
          options: {
            limit: 10240, // 超过指定大小的图片，使用 file-loader 的模块做路径处理
            name: "static/images/[name].[hash:8].[ext]", // 处理后图片路径
            esModule: false, // 可以允许在标签属性上使用require动态加载
          },
        },
      },
    ],
  },
  plugins: [
    // 插件
    new HtmlPlugin({
      // title: "react 环境", // html 的 title 的内容
      template: "./public/index.html", // 指定 html 模板
      filename: "index.html", // 打包后文件名
      minify: {
        // 压缩
        removeComments: true, // 移除注释
        collapseWhitespace: true, // 移除空白符和换行符
      },
    }),
    new CleanWebpackPlugin(),
  ],
}
